﻿<!DOCTYPE html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>-->
<script type="text/javascript" src="fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>
<script src="jquery-1.10.2.js"></script>

<script type="text/javascript">
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
        "type": "Pie3D",
        "renderAt": "chartContainer",
        "width": "850",
        "height": "600",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            //"caption": "次均费用占比",#fff100
			//"subCaption": "Last year",
			"showLabels":"0",
			"isSliced":"1",
			//"labelDistance":12,
			"chartLeftMargin":0,
			"chartTopMargin":0,
			"canvasLeftMargin":0,
			"canvasTopMargin":"0",
			"canvasPadding":"0",
			"captionPadding":"0",
			"formatNumberScale":"0",
			"paletteColors": "#38b035,#0097db,#f45b00",
			"bgColor": "#ffffff",
			"showBorder": "0",
			"use3DLighting": "0",
			"showShadow": "0",
			"enableSmartLabels": "0",
			"startingAngle": "80",
			"showPercentValues": "1",
			"showPercentInTooltip": "0",
			"labelFont":"微软雅黑",
			"labelFontSize":"30",
			"decimals": "1",
			"captionFont": "微软雅黑",
			"captionFontSize": "18",
			"subcaptionFontSize": "14",
			"subcaptionFontBold": "0",
			"showToolTip":"0",
			"toolTipColor": "#ffffff",
			"toolTipBorderThickness": "0",
			"toolTipBgColor": "#000000",
			"toolTipBgAlpha": "20",
			"toolTipBorderRadius": "2",
			"toolTipPadding": "5",
			"showHoverEffect": "1",
			"showLegend": "1",
			"legendBgColor": "#ffffff",
			"legendBorderAlpha": "0",
			"legendShadow": "0",
			"legendItemFont": "微软雅黑",
			"legendItemFontSize": "30",
			"legendItemFontColor": "#666666",
			"useDataPlotColorForLabels": "1",
			"pieSliceDepth":80,
			//"legendPosition":"RIGHT",
			"isSmartLineSlanted":"1",
			"smartLineThickness":3,
			"smartLineColor":"#CAC4BE",
			"enableSmartLabels":"1"
         },
         "data": [
			{
				"label": "次均药费",
				"value": "1577.85"
			},
			{
				"label": "次均耗材费",
				"value": "704.73"
			},
			{
				"label": "其他",
				"value": "3612.96"
			}
          ]
      }

  });
revenueChart.render();

//var html = '<div id="overrideLogoDiv" style="width:130px;height:16px;position:absolute;background-color:white;"></div>';
//$("body").append(html);
//var chartSpan = $("#chartContainer > span");
//var chartPos = chartSpan.position();
//alert(chartPos.left+","+chartPos.top+","+chartSpan.height());
//$("#overrideLogoDiv").css("left",chartPos.left+5)
//$("#overrideLogoDiv").css("top",(chartPos.top+chartSpan.height()-20))
})
</script>
</head>
<body >
<div width="100%" align="center" style="border: solid 0px; float:center;" id="chartContainer">FusionCharts XT will load here!</div>
</html>